<template>
    <div class="shis">
        <ul class="cityNames">
            <li  @mouseover="countyNamesShow(item.label)" v-for="(item,index) of options" :key="index" @mouseout="countyNamesHide" @click="toCity(item.label)">
            <span>{{item.label}}</span>
            <span class="iconfont"> &#xe74e;</span>
            </li>
        </ul>
        <ul v-show="isCounty" class="countyNames">
            <li @mouseover="stationNamesShow(item.label , countyNames)" v-for="(item,index) of countyNames" :key="index" @click="toCounty(item.label)">
                <span>{{item.label}}</span>
                <span class="iconfont"> &#xe74e;</span>
            </li>
        </ul>
        <ul v-show="isStation" class="stationNames">
            <li v-for="(item,index) of stationNames" :key="index" @click="toStation(item.label)">
                <span>{{item.label}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "CommonSelect",
    props:{
        options:Array
    },
    data(){
        return{
            isStation: false,
            isCounty:  false,
            countyNames:  [],
            stationNames: [],
        }
    },
    methods:{
        toCity(cityName){
            this.$router.push('/city/' + cityName);
        },
        toCounty(countyName){
            this.$router.push('/county/' + countyName);
        },
        toStation(stationName){
            this.$router.push('/station/' + stationName);
        },
        countyNamesShow(label){
            this.isCounty = true
            for(var item of this.options){
               if(label == item.label)
               this.countyNames = item.children;
            }
        },
        stationNamesShow(label,countyNames){
            this.isStation = true
            for(var item of countyNames){
               if(label == item.label)
               this.stationNames = item.children;
            }
        },
        countyNamesHide(){
            this.isStation = false
        },
    }
}
</script>

<style lang="stylus" scoped>
    .shis
        min-height:18.9vh
        position:absolute
        left:0px
        top:12px
        z-index:100
        cursor : pointer
        display : flex
        ul
            width:135px
            background: rgba(31,39,49,0.9)
            border:1px solid #7d7d7d   
            padding-top:5px
            padding-bottom:5px 
            li
                font-size: 14px
                color: white
                height: 25px
                line-height: 25px
                text-indent: 5px
                span 
                    display: inline-block
                    height: 25px
                    line-height: 25px
                span.iconfont
                    float: right
                    padding-right: 5px
            li:hover
                background:#2FDEFD
                color: black
        .cityNames
            background: rgba(31,39,49,0.9)
            min-height:18.9vh
        .countyNames
            background: rgba(31,39,49,0.9)
            min-height:18.9vh
        .stationNames
            background: rgba(31,39,49,0.9)
            min-height:18.9vh
</style>


